<!-- 测评专题 -->
<template>
	<div>
		<div style="margin: 20px 20px 0;" v-loading='listLoading'>
			<div style="padding-bottom:20px;overflow: hidden;">
				<div style="margin-bottom: 20px;">
					<el-button v-if="permission==3" type="primary" @click="linkToAdd">新建专题</el-button>
					<el-button @click="handCopy(topicUrl, $event)">复制链接</el-button>
				</div>
				<div>
					<el-date-picker :editable="false" style="width: 200px;" type="date" format="yyyy-MM-dd" placeholder="发布时间"  @change="timeCheck(1)" v-model="listQuery.startTime"></el-date-picker>
					<el-date-picker :editable="false"  style="width: 200px;" type="date" format="yyyy-MM-dd" placeholder="结束时间" @change="timeCheck(2)" v-model="listQuery.endTime"></el-date-picker>

					<el-input v-model="listQuery.searchName" placeholder="请输入专题名称" @keyup.enter.native="handleFilter" style="width: 250px" clearable></el-input>
					<el-button class='search' type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
				</div>
			</div>
			<div style="margin: 0 0;">
			<el-tabs v-model="activeName" @tab-click="handleClick">
			  <el-tab-pane label="全部" name="all" >
				<!--<topic-table :status="status"></topic-table>-->
			  </el-tab-pane>
			  <el-tab-pane label="已上架" name="published">
				<!--<topic-table :status="status"></topic-table>-->
			  </el-tab-pane>
			  <el-tab-pane label="已下架" name="noPublish">
				<!--<topic-table :status="status"></topic-table>-->
			  </el-tab-pane>
			</el-tabs>
			<topic-table :permission="permission" :listQuery="listQuery" :topicData="topicData"></topic-table>
			</div>
		</div>
	</div>
</template>

<script>
import { getTopicList } from '@/api/topic'
import topicTable from './components/topicTable.vue'
import clip from '@/utils/clipboard'
import { knowledge_test } from '@/utils/permission'
export default {
  components: {
    topicTable
  },
  data() {
    return {
      permission: 3,
      listLoading: false,
      listQuery: {
        // 限制条件
        currentPage: 1, // 当前页
        searchName: null, // 搜索专题名称
        groundingType: null, // 搜索选择的课程类型
        startTime: null, // 搜索的发布日期（开始）
        endTime: null, // 搜索的发布日期（结束）
        page: 1,
        type: 'all',
        total: null

      },
      activeName: 'all', // 选中的tab页
      topicData: [],
      topicUrl: null,
      selectOptions: [
        // 选择上架或者下架的选项
        {
          id: 1,
          value: '已上架'
        },
        {
          id: -1,
          value: '已下架'
        }
      ]
    }
  },
  created() {
    this.getModelPermission()
    this.getList()
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_test()
    },
    linkToAdd() {
      this.$router.push({ path: `/testManage/createTopics` })
    },
    handleClick(tab, event) {
      this.listQuery.type = tab.name // 切换子主键的名称
      this.listQuery.groundingType = null // 切换子主键时将条件清空
      this.listQuery.startTime = null
      this.listQuery.endTime = null
      this.listQuery.searchName = null
      this.getList()
    },
    getList() {
      this.listLoading = true
      getTopicList(this.listQuery)
        .then(res => {
          console.log('专题', res.data.data)
          this.topicData = res.data.data.topicList.data
          this.listQuery.total = res.data.data.topicList.total
          this.topicUrl = res.data.data.topicUrl
          this.listLoading = false
        })
        .catch(err => {
          this.listLoading = false
          console.log(err)
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.listQuery.type = 'all'
      this.getList()
    },
    handCopy(url, event) {
      clip(url, event)
    },
    timeCheck(type) {
      if (this.listQuery.startTime && this.listQuery.endTime && this.listQuery.startTime > this.listQuery.endTime) {
        this.$message({
          message: '结束时间不能小于发布时间',
          type: 'error'
        })

        if (type == 1) {
          this.listQuery.startTime = null
        } else {
          this.listQuery.endTime = null
        }
      }
    }
  },
  mounted() {}
}
</script>
<style scoped>
  button.search {
    background-color:#202e3c;
    border:none;
  }
  button.search:hover {
    background-color: #384858;
  }

</style>
